<template>
  <div class="page-main" >
    <el-form :inline="true" :model="state.form" class="demo-form-inline">
      <el-form-item label="统计周期">
        <el-radio-group v-model="state.form.date" @input="changeType" class="ml-4">
          <el-radio label="1" size="small">日</el-radio>
          <el-radio label="2" size="small">月</el-radio>
          <el-radio label="3" size="small">季度</el-radio>
          <el-radio label="4" size="small">年</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="分析区间">
        <el-date-picker
            @change="changeDate"
            size="small"
            v-model="state.form.time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="起始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>


      <el-form-item label="">
        <el-button type="primary" size="small">统计</el-button>
        <el-button type="primary" size="small">导出</el-button>

      </el-form-item>
    </el-form>
    <el-row :gutter="30" v-if="!state.loading" v-loading="state.loading">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header> 预约量统计</template>
          <charts-line  :lineData="state.lineData" :line_x="state.line_x"></charts-line>
        </el-card>
      </el-col>
    </el-row>


    <el-row :gutter="30" v-if="!state.loading" v-loading="state.loading">
      <el-col :span="24">
        <el-descriptions
            class="margin-top"
            :title="state.param.start_time+'至'+state.param.end_time+'全院完成例数(合计:'+state.total+')'"
            :column="3"
            size="large"
            border
        >

          <el-descriptions-item v-for="(item,key) in state.showData">
            <template #label>
              <div class="cell-item">
                {{ item.date }}
              </div>
            </template>
            {{ item.value }}
          </el-descriptions-item>

        </el-descriptions>
      </el-col>
    </el-row>
  </div>
</template>


<script setup name="appointmentsAll">
import {prebookApi} from "/@/api/dashbord/prebook";
import chartsLine from '/@/components/charts/line.vue';
import {onMounted} from "vue";
import {getPast15Days, getPastMonth, getToday,getCurrentQuarter,getCurrentYear} from "/@/utils/timeUtil";
import { ElMessage, ElMessageBox } from 'element-plus';

const props = defineProps({
  type: {
    type: Number,
    default:1
  },
});
const state = reactive({
  form: {
    date:"",
    time:[]
  },

  loading: true,
  lineData: [],
  showData: [],
  dataList: [],
  line_x: [],
  total: 0,
  param: {
    type: 0,
    start_time: '',
    end_time: '',
  }
})
const changeDate = (param) => {
    state.start_time = param[0]
    state.end_time = param[1]
    getData(state.param)
}

const changeType = (param) => {
  console.log(param)
   let type = param.target.value
   if(type==1){
        state.param.start_time  =  getToday()
        state.param.end_time  =  getToday()
   }
   if(type==2){
        state.param.start_time = getPastMonth()['startDate']
        state.param.end_time = getPastMonth()['endDate']
   }
   if(type==3){
     state.param.start_time = getCurrentQuarter()['startDate']
      state.param.end_time = getCurrentQuarter()['endDate']
   }
    if(type==4){
      state.param.start_time = getCurrentYear()['startDate']
      state.param.end_time = getCurrentYear()['endDate']
    }
   getData(state.param)
}

const getData = (param) => {
  state.loading = true
  state.total =0;
  prebookApi().getPreBookFinsih(param).then(res => {

    state.loading = false
    state.dataList = res.data['list']

    let linx_x = Object.keys(res.data['list'])
    state.lineData = Object.values(res.data['list'])
    state.line_x = linx_x

    state.showData = Object.entries(state.dataList).map(([key, item]) => {
      state.total +=item
      return {
        date: key,
        value: item
      };
    });
    ElMessage.success('获取数据成功');

    console.log(state.showData)
  })
}

onMounted(() => {
  let date = getPast15Days()
  state.param = {
    type: 0,
    start_time: getPast15Days()['startDate'],
    end_time: getPast15Days()['endDate'],
  }
  getData(state.param)
});
</script>

<style lang="scss" scoped>
:deep() .el-descriptions__title {
  text-align: center;
  width: 100%;
  margin-top: 30px;
}

.margin-top {
  border: 1px solid #ebeef5;
}

.export-button {
  position: absolute;
  right: 30%;
  top: 30px;
}
</style>
